<!--
 * @Author: GuoShuning
 * @Date: 2022-12-15 14:02:11
 * @LastEditors: GuoShuning
 * @LastEditTime: 2022-12-17 14:41:28
 * @Description: 
-->
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link rel="stylesheet" href="./common/css/coommon.css" />
  <title>预警中心</title>
</head>

<body>
  <div class="waringCenterPage">
    <div class="topBox itemBoxContent">
      <div class="itemBox_boxTitle">预警中心</div>
      <div class="allSelect">
        <div class="leftSelect">
          <div class="itemSelect">
            <div class="input-group">
              <label>项目名称</label>
              <input placeholder="输入关键字" />
            </div>
          </div>
          <div class="itemSelect">
            <div class="input-group">
              <label>项目人员</label>
              <input placeholder="输入人员姓名" />
            </div>
          </div>
          <div class="itemSelect">
            <div class="input-group">
              <label>预警时间</label>
              <input placeholder="输入关键字" />
            </div>
          </div>
          <div class="itemSelect">
            <div class="select-group">
              <label>预警类型</label>
              <div class="options">
                <input placeholder="输入关键字" />
                <ul>
                  <li>输入关键字</li>
                  <li>输入关键字</li>
                  <li>输入关键字</li>
                  <li>输入关键字</li>
                </ul>
              </div>
            </div>
          </div>
          <div class="itemSelect">
            <div class="select-group">
              <label>处理状态</label>
              <div class="options">
                <input placeholder="输入关键字" />
                <ul>
                  <li>输入关键字</li>
                  <li>输入关键字</li>
                  <li>输入关键字</li>
                  <li>输入关键字</li>
                </ul>
              </div>
            </div>
          </div>
        </div>
        <div class="rightBtn">
          <button class="button_primary button_icon"><i class="bi bi-search btnIcon"></i>搜索</button>
          <button class="button_primary_plain button_icon"><i class="bi bi-arrow-clockwise btnIcon"></i>重置</button>
        </div>
      </div>
    </div>
    <div class="bottomBox itemBoxContent">
      <div class="tableListCount">预警总数 <span>12</span>个</div>
      <div class="table">
        <div class="table-header">
          <div class="tr">
            <div class="td" style="width: 15%">预警时间</div>
            <div class="td center" style="width: 10%">预警类型</div>
            <div class="td center" style="width: 10%">所属项目</div>
            <div class="td center" style="width: 10%">商务经理</div>
            <div class="td center" style="width: 10%">售前经理</div>
            <div class="td center" style="width: 10%">处理状态</div>
            <div class="td" style="width: 15%">操作</div>
          </div>
        </div>
        <div class="table-body">
          <div class="tr">
            <div class="td" style="width: 15%">2022-11-17 14:39</div>
            <div class="td center" style="width: 10%">临期未签约</div>
            <div class="td center" style="width: 10%">聚达项目</div>
            <div class="td center" style="width: 10%">周晓咏</div>
            <div class="td center" style="width: 10%">周校民</div>
            <div class="td center" style="width: 10%">
              <button class="button_warning_text">待处理</button>
            </div>
            <div class="td" style="width: 15%">
              <button class="button_success_text" id="showEl">处理</button>
              &ensp;
              <button class="button_primary_text">查看</button>
            </div>
          </div>
        </div>
      </div>
      <div class="pagination">
        <span>共 200 条</span>
        <ul>
          <li><i class="bi bi-chevron-left"></i></li>
          <li class="active">1</li>
          <li>2</li>
          <li>3</li>
          <li>4</li>
          <li>...</li>
          <li><i class="bi bi-chevron-right"></i></li>
        </ul>
      </div>
    </div>
    <div id="dialog-content">
      <div class="waringCenterPage_dialog">
        <div class="dialog_itemLine">
          <div class="itemTips"><span class="require">*</span>预警时间</div>
          <div class="itemText">2022年11月18日 14:28:15</div>
        </div>
        <div class="dialog_itemLine">
          <div class="itemTips"><span class="require">*</span>预警类型</div>
          <div class="itemText">临期未签约</div>
        </div>
        <div class="dialog_itemLine">
          <div class="itemTips"><span class="require">*</span>所属项目</div>
          <div class="itemText">项目名称项目名称项目名称</div>
        </div>
        <div class="dialog_itemLine">
          <div class="itemTips"><span class="require">*</span>商务经理</div>
          <div class="itemText">xxx</div>
        </div>
        <div class="dialog_itemLine">
          <div class="itemTips"><span class="require">*</span>售前经理</div>
          <div class="itemText">xxx</div>
        </div>
        <div class="dialog_itemLine">
          <div class="itemTips"><span class="require">*</span>起止时间</div>
          <div class="itemText">2022年11月18日——2022年11月18日 </div>
        </div>
        <div class="dialog_itemLine">
          <div class="itemTips"><span class="require">*</span>剩余时长</div>
          <div class="itemText">3天</div>
        </div>
        <div class="dialog_itemLine">
          <div class="itemTips"><span class="require">*</span>签约状态</div>
          <div class="itemText">未签约</div>
        </div>
        <div class="dialog_itemLine">
          <div class="itemTips"><span class="require">*</span>处理状态</div>
          <div class="itemText itemText_warning_text">待处理</div>
        </div>
      </div>
    </div>
  </div>
</body>
<script type="module">
  import DiaLog from "./common/js/diaLog.js";
  let dialog = new DiaLog({
    title: "预警详情",
    width: "409px",
    el: "#dialog-content",
    cancelText: "取消",
    confirmText: "确定",
    cancel: () => {
      console.log("取消");
      dialog.hide();
    },
    confirm: () => {
      console.log("确定");
      dialog.hide();
    },
  });
  console.log(showEl)
  showEl.addEventListener("click", () => {
    dialog.show();
  });
</script>

</html>